<template>
    <div class="a1">
        <home-header></home-header>
        <div class="wrapper">
            <div class="left-li">
            <ul>
                <li class="li-s1">我的账户</li>
                <li type="primary">个人中心</li>
                <li>消息通知</li>
                <li>个人信息</li>
                <li>安全设置</li>
                <li>地址管理</li>
                <li>我的积分</li>
                <li>我的足迹</li>
                <li>邀请有礼</li>
                <li>幸运抽奖</li>
            </ul>
            <hr width="100%" align="left">
            <ul>
                <li class="li-s1">交易管理</li>
                <li @click="rtsv">我的订单</li>
                <li>优惠劵</li>
                <li>礼品卡</li>
                <li>评价晒单</li>
                <li>售后服务</li>
            </ul>
            <hr width="100%" align="left">
            <ul>
                <li class="li-s1">我的收藏</li>
                <li>收藏的商品</li>
                <li>收藏的专题</li>
                <li>关注的品牌</li>
            </ul>
            <hr width="100%" align="left">
            <ul>
                <li class="li-s1">帮助中心</li>
                <li>帮助中心</li>
                <li>在线客服</li>
            </ul>
        </div>
        <div class="right-ri">
            <div class="right-ri1">
                <img src="./tx.jpg" alt="" class="img1">
                <div class="right-ri-s">Did</div>
                <div class="right-di">
                    <div>
                        <p class="el-icon-user-solid"></p>
                        <div>会员中心</div>
                    </div>
                    <div>
                        <p class="el-icon-s-tools"></p>
                        <div>安全设置</div>
                    </div>
                    <div>
                        <p class="el-icon-location"></p>
                        <div>地址管理</div>
                    </div>
                </div>
            </div>

            <div class="right-ri2">
                <div class="top">
                    <div class="right-ri2-1">我的收藏</div>
                    <div class="right-ri2-2">查看全部 ></div>
                </div>
                <hr width="100%" align="left">
                <div class="right-ri2-3">
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                </div>
            </div>
            <div class="right-ri2">
                <div class="right-ri2-1">我的足迹</div>
                <div class="right-ri3-2">查看全部 ></div>
                <hr width="100%" align="left">
                <div class="right-ri2-3">
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                    <div class="right-ri2-4">
                        <img src="./1.png" alt="" class="img2">
                    </div>
                </div>
            </div>
            <div class="right-ri2">111</div>
        </div>
        </div>
        <home-footer></home-footer>
    </div>
</template>
<script>
import HomeHeader from '@/common/HomeHeader.vue'
import HomeFooter from '@/common/HomeFooter.vue'
export default {
  components: { HomeHeader, HomeFooter },
    name: "FsKl",
    methods: {
        rtsv() {
            this.$router.push("/RtSv")
        }
    },
}
</script>
<style lang="less" scoped>
* {
    list-style-type: none;
}
hr{
    margin-bottom:10px;
}
li {
    color: rgb(0, 0, 0);
    transition: 0.5 s;
}

li:hover {
    color: rgb(120, 236, 95);
}

.a1 {
    width: 100%;
    height: 1800px;
    background-color:#f5f5f5;
}
.wrapper{
    padding:0 250px;
    display:flex;
}
.left-li {
    width: 220px;
    line-height: 35px;
    background-color: rgb(255, 255, 255);
}

.right-ri {
    width:100%;
    margin-left:20px;
    background-color: #f5f5f5;
    .right-ri1{
        height:120px;
        // line-height:120px;
        background-color: #27bb9a;
        display:flex;
        justify-content: space-between;
        img{
            width:80px;
            height:80px;
            border-radius:50%;
            margin-top:20px;
            margin-left:40px;
        }
        .right-ri-s{
            color:#fff;
            margin-left:-550px;
            font-size:20px;
            line-height:120px;
        }
        .right-di{
            width:300px;
            display:flex;
            color:#fff;
            margin-top:20px;
            margin-right:100px;
            text-align:center;
            justify-content: space-between;
        }
    }
    .right-ri2{
        width:100%;
        background:#fff;
        margin-top:20px;
        .top{
            height:50px;
            line-height:50px;
            display:flex;
            justify-content: space-between;
            .right-ri2-1{
                font-size:22px;
            }
            .right-ri2-2{
                color:#666;
            }
        }
        .right-ri2-3{
            display:flex;
            justify-content: space-between;
        }
    }
}
</style>